//引入六张贴图 方形 ->>客厅
import living_r from "../../public/images/livingRoom/living_r.jpg";
import living_l from "../../public/images/livingRoom/living_l.jpg";
import living_u from "../../public/images/livingRoom/living_u.jpg";
import living_d from "../../public/images/livingRoom/living_d.jpg";
import living_f from "../../public/images/livingRoom/living_f.jpg";
import living_b from "../../public/images/livingRoom/living_b.jpg";
//引入六张贴图 方形 ->>阳台
import balcony_r from "../../public/images/balcony/balcony_r.jpg";
import balcony_l from "../../public/images/balcony/balcony_l.jpg";
import balcony_u from "../../public/images/balcony/balcony_u.jpg";
import balcony_d from "../../public/images/balcony/balcony_d.jpg";
import balcony_f from "../../public/images/balcony/balcony_f.jpg";
import balcony_b from "../../public/images/balcony/balcony_b.jpg";

//引入贴图 圆形
import sceneImg from "../../public/images/scene.jpeg";

import * as THREE from "three";
import * as dat from "dat.gui";
import { gsap } from "gsap";

let scene, camera;

// 创建场景
scene = new THREE.Scene();

// 创建相机
camera = new THREE.PerspectiveCamera(
	75,
	window.innerWidth / window.innerHeight,
	0.1,
	1000
);
camera.position.set(0, 0, 0.01);

const useBox = () => {
	let materials = [];
	const texture_right = new THREE.TextureLoader().load(living_r);
	materials.push(new THREE.MeshBasicMaterial({ map: texture_right })); //右
	const texture_left = new THREE.TextureLoader().load(living_l);
	materials.push(new THREE.MeshBasicMaterial({ map: texture_left })); //左
	const texture_top = new THREE.TextureLoader().load(living_u);
	materials.push(new THREE.MeshBasicMaterial({ map: texture_top })); //上
	const texture_bottom = new THREE.TextureLoader().load(living_d);
	materials.push(new THREE.MeshBasicMaterial({ map: texture_bottom })); //下
	const texture_front = new THREE.TextureLoader().load(living_f);
	materials.push(new THREE.MeshBasicMaterial({ map: texture_front })); //前
	const texture_back = new THREE.TextureLoader().load(living_b);
	materials.push(new THREE.MeshBasicMaterial({ map: texture_back })); //后

	// 创建相机
	camera = new THREE.PerspectiveCamera(
		75,
		window.innerWidth / window.innerHeight,
		0.1,
		1000
	);
	camera.position.set(0, 0, 0.1);
	// camera.position.z = 30

	// 创建几何体和材质 --->客厅
	const geometry = new THREE.BoxGeometry(10, 10, 10);

	const box = new THREE.Mesh(geometry, materials);
	box.geometry.scale(1, 1, -1); //反转几何体

	//阳台
	let balconyRoom = [];
	const texture_b_right = new THREE.TextureLoader().load(balcony_r);
	balconyRoom.push(new THREE.MeshBasicMaterial({ map: texture_b_right }));
	const texture_b_left = new THREE.TextureLoader().load(balcony_l);
	balconyRoom.push(new THREE.MeshBasicMaterial({ map: texture_b_left }));
	const texture_b_top = new THREE.TextureLoader().load(balcony_u);
	balconyRoom.push(new THREE.MeshBasicMaterial({ map: texture_b_top }));
	const texture_b_bottom = new THREE.TextureLoader().load(balcony_d);
	balconyRoom.push(new THREE.MeshBasicMaterial({ map: texture_b_bottom }));
	const texture_b_front = new THREE.TextureLoader().load(balcony_f);
	balconyRoom.push(new THREE.MeshBasicMaterial({ map: texture_b_front }));
	const texture_b_back = new THREE.TextureLoader().load(balcony_b);
	balconyRoom.push(new THREE.MeshBasicMaterial({ map: texture_b_back }));

	// 创建几何体和材质 --->阳台
	const geometry_bancony = new THREE.BoxGeometry(10, 10, 10);
	const balconyV3 = new THREE.Vector3(0, 0, -10); //阳台位置
	const balconyE3 = new THREE.Euler(0, 0, 0); //阳台旋转
	const box_bbalcony = new THREE.Mesh(geometry_bancony, balconyRoom);
	box_bbalcony.geometry.scale(1, 1, -1);
	box_bbalcony.position.copy(balconyV3);
	box_bbalcony.rotation.copy(balconyE3);

	//定义阳台的canvas
	const balconyCanvas = document.createElement("canvas");
	balconyCanvas.width = 1024
	balconyCanvas.height = 1024 
	const context = balconyCanvas.getContext("2d");
	context.fillStyle = "rgba(29, 27, 27, 0.5)";
	context.fillRect(0, 256, balconyCanvas.width, balconyCanvas.height / 2);
	context.font = "bold 150px Arial";
	context.fillStyle = "black";
	context.textBaseline = "middle";
	context.textAlign = "center";
	context.fillStyle = 'White'
	context.fillText("欢迎来到阳台", balconyCanvas.width / 2, balconyCanvas.height / 2);


	const balconyTexture = new THREE.CanvasTexture(balconyCanvas);
	//阳台导航
	const spriteMaterial = new THREE.SpriteMaterial({ map: balconyTexture,transparent:true })
	const balconySprite = new THREE.Sprite(spriteMaterial);
	const balconySpritePosition = new THREE.Vector3(0, 0, -4.5);
	balconySprite.position.copy(balconySpritePosition);
	box_bbalcony.add(balconySprite);

	let poiObjects = [];
	poiObjects.push(balconySprite) //添加到数组中，后续用于射线检测

	const raycaster = new THREE.Raycaster();
	const pointer = new THREE.Vector2();

	// 添加点击事件
	window.addEventListener("click", (event) => {
		event.preventDefault();
		// 将鼠标位置归一化为设备坐标。x 和 y 方向的取值范围是 (-1 to +1)
		pointer.x = (event.clientX / window.innerWidth) * 2 - 1;
		pointer.y = -(event.clientY / window.innerHeight) * 2 + 1;

		// 通过摄像机和鼠标位置更新射线
		raycaster.setFromCamera(pointer, camera);
		// 计算物体和射线的交点
		const intersects = raycaster.intersectObjects(poiObjects);
		if (intersects.length > 0) {
			gsap.to(camera.position, {
				duration: 1,
				x: 0,
				y: 0,
				z: -10,
			});
		}
	});


	// 创建场景
	scene = new THREE.Scene();
	// 添加物体到场景中
	scene.add(box);
	scene.add(box_bbalcony);
	scene.add(balconySprite)
	// // 图形化控制界面
	// const gui = new dat.GUI();

	// const boxFolder = gui.addFolder("立方体属性");
	// boxFolder.add(box.position, "x").name("移动x轴").min(-5).max(5).step(0.1);
	// boxFolder.add(box.position, "y").name("移动y轴").min(-5).max(5).step(0.1);
	// boxFolder.add(box.position, "z").name("移动z轴").min(-5).max(5).step(0.1);
	// boxFolder.add(box.rotation, "x").name("旋转x轴").min(-5).max(5).step(0.1);
	// boxFolder.add(box.rotation, "y").name("旋转y轴").min(-5).max(5).step(0.1);
	// boxFolder.add(box.rotation, "z").name("旋转z轴").min(-5).max(5).step(0.1);
	// boxFolder
	// 	.addColor({ color: 0x00ff00 }, "color")
	// 	.name("修改颜色")
	// 	.onChange((e) => {
	// 		box.material.color = new THREE.Color(e);
	// 	});

	// const params = {
	// 	visible: true,
	// 	moveAnimation: () => {
	// 		gsap.to(box.position, { x: 5, duration: 2 });
	// 	},
	// 	cameraAnimation: () => {
	// 		gsap.to(camera.position, {
	// 			duration: 1,
	// 			x: 0,
	// 			y: 0,
	// 			z: -10,
	// 		});
	// 	},
	// };

	// boxFolder
	// 	.add(params, "visible")
	// 	.name("是否可见")
	// 	.onChange((e) => {
	// 		box.visible = e;
	// 	});
	// boxFolder.add(params, "moveAnimation").name("移动动画");
	// boxFolder.open();

	// const cameraFolder = gui.addFolder("相机属性");
	// cameraFolder
	// 	.add(camera.position, "x")
	// 	.name("相机x轴")
	// 	.min(-30)
	// 	.max(30)
	// 	.step(0.1);
	// cameraFolder
	// 	.add(camera.position, "y")
	// 	.name("相机y轴")
	// 	.min(-30)
	// 	.max(30)
	// 	.step(0.1);
	// cameraFolder
	// 	.add(camera.position, "z")
	// 	.name("相机z轴")
	// 	.min(-30)
	// 	.max(30)
	// 	.step(0.1);
	// cameraFolder
	// 	.add(camera.rotation, "x")
	// 	.name("相机旋转x轴")
	// 	.min(-5)
	// 	.max(5)
	// 	.step(0.1);
	// cameraFolder
	// 	.add(camera.rotation, "y")
	// 	.name("相机旋转y轴")
	// 	.min(-5)
	// 	.max(5)
	// 	.step(0.1);
	// cameraFolder
	// 	.add(camera.rotation, "z")
	// 	.name("相机旋转z轴")
	// 	.min(-5)
	// 	.max(5)
	// 	.step(0.1);

	// cameraFolder.add(params, "cameraAnimation").name("相机移动位置");

	// cameraFolder.open();

	// 坐标辅助器
	// const axesHelper = new THREE.AxesHelper(20);
	// scene.add(axesHelper);
};

const useRound = () => {
	// 创建相机
	camera = new THREE.PerspectiveCamera(
		75,
		window.innerWidth / window.innerHeight,
		0.1,
		1000
	);
	camera.position.set(0, 0, 0.1);

	//创建几何体和材质
	const spher = new THREE.SphereGeometry(1, 50, 50);
	const texture_scent = new THREE.TextureLoader().load(sceneImg);
	const material = new THREE.MeshBasicMaterial({ map: texture_scent });
	const box = new THREE.Mesh(spher, material);
	box.geometry.scale(-1, 1, 1); //反转几何体

	// 创建场景
	scene = new THREE.Scene();
	// 添加物体到场景中
	scene.add(box);
};

export { scene, camera, useBox, useRound, THREE };
